
<script type="text/javascript" src="<?= base_url() ?>assets/js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/js/plugins/charts/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/js/plugins/charts/jquery.flot.pie.js"></script>

<!-- Content -->
<div id="content">

    <!-- Content wrapper -->
    <div class="wrapper">

        <!-- Breadcrumbs line -->
        <div class="crumbs">
            <ul id="breadcrumbs" class="breadcrumb"> 
                <li><a href="<?= base_url() ?>xpanel">XPANEL</a></li>
                <li class="active"><a href="<?= base_url() ?>" title="">Inicio</a></li>
            </ul>

        </div>
        <!-- /breadcrumbs line -->

        <!-- Page header -->
        <div class="page-header">
            <div class="page-title">
                <h5>XPANEL</h5>
            </div>

        </div>
        <!-- /page header -->

        <!-- Action tabs -->
        <div class="actions-wrapper">
            <div class="actions">

                <div id="user-stats">
                    <ul class="round-buttons">
                        <li><div class="depth"><a href="<?= base_url() ?>evaluacion" title="Aplicar encuesta" class="tip"><i class="icon-plus"></i></a></div></li>
                        <li><div class="depth"><a href="" title="Estadísticas generales" class="tip"><i class="icon-signal"></i></a></div></li>
                        <li><div class="depth"><a href="" title="Perfil" class="tip"><i class="icon-cogs"></i></a></div></li>
                    </ul>
                </div>

                <div id="quick-actions">
                    <ul class="statistics">
                        <li>
                            <div class="top-info">
                                <a href="#" title="" class="blue-square"><i class="icon-plus"></i></a>
                                <strong>12,476</strong>
                            </div>
                            <div class="progress progress-micro"><div class="bar" style="width: 60%;"></div></div>
                            <span>Empleados totales</span>
                        </li>
                        <li>
                            <div class="top-info">
                                <a href="#" title="" class="red-square"><i class="icon-hand-up"></i></a>
                                <strong>621,873</strong>
                            </div>
                            <div class="progress progress-micro"><div class="bar" style="width: 20%;"></div></div>
                            <span>Cuestionarios aplicados</span>
                        </li>
                        <li>
                            <div class="top-info">
                                <a href="#" title="" class="purple-square"><i class="icon-shopping-cart"></i></a>
                                <strong>562</strong>
                            </div>
                            <div class="progress progress-micro"><div class="bar" style="width: 90%;"></div></div>
                            <span>Sucursales evaluadas</span>
                        </li>
                        <li>
                            <div class="top-info">
                                <a href="#" title="" class="green-square"><i class="icon-ok"></i></a>
                                <strong>$45,360</strong>
                            </div>
                            <div class="progress progress-micro"><div class="bar" style="width: 70%;"></div></div>
                            <span>Preguntas respondidas</span>
                        </li>
                        <li>
                            <div class="top-info">
                                <a href="#" title="" class="sea-square"><i class="icon-group"></i></a>
                                <strong>562K+</strong>
                            </div>
                            <div class="progress progress-micro"><div class="bar" style="width: 50%;"></div></div>
                            <span>Total users</span>
                        </li>

                    </ul>
                </div>
                <div id="map">
                    <div id="google-map"></div>
                </div>


                <ul class="action-tabs">
                    <li><a href="#user-stats" title="">Controles rápidos</a></li>
                    <li><a href="#quick-actions" title="">Estadísticas generales</a></li>
                    <li><a href="#map" title="" id="map-link">Google map</a></li>
                </ul>
            </div>
        </div>
        <!-- /action tabs -->


        <div class="row-fluid">
            <div class="span6">

                <!-- Vertical bars -->       
                <div class="widget">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <h6>Barras Verticales (Proximamente en Operación)</h6>
                        </div>
                    </div>
                    <div class="well body">
                        <div class="graph-standard" id="placeholder1"></div>
                    </div>
                </div>
                <!-- /vertical bars -->

                <!-- Simple chart -->       
                <div class="widget">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <h6>Simple chart (Proximamente en Operación)</h6>
                        </div>
                    </div>
                    <div class="well body">
                        <div class="graph-standard" id="graph"></div>
                    </div>
                </div>
                <!-- /simple chart -->

            </div>
            <div class="span4">

                <!-- Pie chart -->       
                <div class="widget">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <h6>Pie chart (Proximamente en Operación)</h6>
                        </div>
                    </div>
                    <div class="well body">
                        <div class="graph-standard" id="pie"></div>
                    </div>
                </div>
                <!-- /pie chart -->

                <!-- Filled chart (red) -->       
                <div class="widget">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <h6>Filled chart (Proximamente en Operación)</h6>
                        </div>
                    </div>
                    <div class="well body">
                        <div class="graph-standard" id="filled2"></div>
                    </div>
                </div>
                <!-- /filled chart (red) -->

            </div>


        </div>



    </div>
    <!-- /content wrapper -->

</div>
<!-- /content -->

<script>
    $(function () {
        var data = [];
        var series = Math.floor(Math.random() * 10) + 1;
        for (var i = 0; i < series; i++)
        {
            data[i] = {label: "Series" + (i + 1), data: Math.floor(Math.random() * 100) + 1}
        }

        $.plot($("#pie"), data,
                {
                    series: {
                        pie: {
                            show: true,
                            radius: 1,
                            label: {
                                show: true,
                                radius: 2 / 3,
                                formatter: function (label, series) {
                                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                                },
                                threshold: 0.1
                            }
                        }
                    },
                    legend: {
                        show: false
                    }
                });


    });
</script>
<script>
    $(function () {
        var previousPoint;

        var d1 = [];
        for (var i = 0; i <= 10; i += 1)
            d1.push([i, parseInt(Math.random() * 30)]);

        var d2 = [];
        for (var i = 0; i <= 10; i += 1)
            d2.push([i, parseInt(Math.random() * 30)]);

        var d3 = [];
        for (var i = 0; i <= 10; i += 1)
            d3.push([i, parseInt(Math.random() * 30)]);

        var ds = new Array();

        ds.push({
            data: d1,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 1,
            }
        });
        ds.push({
            data: d2,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 2
            }
        });
        ds.push({
            data: d3,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 3
            }
        });

        //tooltip function
        function showTooltip(x, y, contents, areAbsoluteXY) {
            var rootElt = 'body';

            $('<div id="tooltip2" class="chart-tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 45,
                left: x - 8,
                'z-index': '9999',
                'color': '#fff',
                'font-size': '11px',
                opacity: 0.8
            }).prependTo(rootElt).show();
        }

        //Display graph
        $.plot($("#placeholder1"), ds, {
            grid: {
                hoverable: true
            },
            legend: true

        });


//add tooltip event
        $("#placeholder1").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;

                    //delete de prГ©cГ©dente tooltip
                    $('.chart-tooltip').remove();

                    var x = item.datapoint[0];

                    //All the bars concerning a same x value must display a tooltip with this value and not the shifted value
                    if (item.series.bars.order) {
                        for (var i = 0; i < item.series.data.length; i++) {
                            if (item.series.data[i][3] == item.datapoint[0])
                                x = item.series.data[i][0];
                        }
                    }

                    var y = item.datapoint[1];

                    showTooltip(item.pageX + 5, item.pageY + 5, x + " = " + y);

                }
            }
            else {
                $('.chart-tooltip').remove();
                previousPoint = null;
            }

        });


    });
</script>

<script>
    $(function () {
        var sin = [], cos = [];
        for (var i = 0; i < 16; i += 0.5) {
            sin.push([i, Math.sin(i)]);
            cos.push([i, Math.cos(i)]);
        }

        var plot = $.plot($("#graph"),
                [{data: sin, label: "sin(x)"}, {data: cos, label: "cos(x)"}], {
            series: {
                lines: {show: true},
                points: {show: true}
            },
            grid: {hoverable: true, clickable: true},
            yaxis: {min: -1.1, max: 1.1},
            xaxis: {min: 0, max: 15}
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip" class="chart-tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 45,
                left: x - 9,
                'z-index': '9999',
                'color': '#fff',
                'font-size': '11px',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#graph").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if ($("#graph").length > 0) {
                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(2),
                                y = item.datapoint[1].toFixed(2);

                        showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                    }
                }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            }
        });

        $("#graph").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                plot.highlight(item.series, item.datapoint);
            }
        });
    });

</script>

<script>
    $(document).ready(function () {
        var d1 = [[1262304000000, 6], [1264982400000, 60], [1267401600000, 2043], [1270080000000, 2198], [1272672000000, 2660], [1275350400000, 2782], [1277942400000, 2430], [1280620800000, 2427], [1283299200000, 2100], [1285891200000, 1214], [1288569600000, 1057], [1291161600000, 1025]];

        var data1 = [
            {
                label: "Earnings",
                data: d1,
                color: '#f1553c'
                        //6fc8dd
            }
        ];

        $.plot($("#filled2"), data1, {
            xaxis: {
                show: true,
                min: (new Date(2009, 12, 1)).getTime(),
                max: (new Date(2010, 11, 2)).getTime(),
                mode: "time",
                tickSize: [1, "month"],
                monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                tickLength: 1,
                axisLabel: 'Month',
                axisLabelFontSizePixels: 11,
            },
            yaxis: {
                axisLabel: 'Amount',
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 11,
                autoscaleMargin: 0.01,
                axisLabelPadding: 5
            },
            series: {
                lines: {
                    show: true,
                    fill: true,
                    fillColor: {colors: [{opacity: 0.5}, {opacity: 0.2}]},
                    lineWidth: 1.5
                },
                points: {
                    show: true,
                    radius: 2.5,
                    fill: true,
                    fillColor: "#ffffff",
                    symbol: "circle",
                    lineWidth: 1.1
                }
            },
            grid: {hoverable: true, clickable: true},
            legend: {
                show: false
            }
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip" class="chart-tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 46,
                left: x - 9,
                'z-index': '9999',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#filled2").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if ($("#filled2").length > 0) {
                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(2),
                                y = item.datapoint[1].toFixed(2);

                        showTooltip(item.pageX, item.pageY,
                                item.series.label + " " + "<strong>" + "$" + y + "</strong>");
                    }
                }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            }
        });

        $("#filled2").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                plot.highlight(item.series, item.datapoint);
            }
        });


    });
</script>